<template>
  <div class="list flex box-row-column">
    <div class="flex box-row-column">
      <div class="header_right flex-1">
        <div class="zi1 flex flex-align-center">
          企业合规仪表盘
          <!-- <el-icon color="#01509f" class="no-inherit ml10" style="margin-top: 1px">
            <QuestionFilled />
          </el-icon> -->
          <div class="flex ml10 fxzi1" style="">
            <el-icon color="#01509f" style="margin-top: 2px"><Warning /></el-icon>
            系统将于每月月初进行合规风险自动扫描
          </div>
        </div>

        <div class="flex justify-content-center box-align-center">
          <div ref="gaugeChartRef" class="gauge-chart"></div>

          <div class="flex flex-1 box-row-column" style="margin-left: 48px">
            <div class="color666 font16">最近扫描时间:{{ time }}</div>
            <div class="flex mt20">
              <div class="flex-1 flex flex-align-center">
                <div><img src="@/assets/image/cf/img21.png" alt="" /></div>
                <div class="flex-1 flex box-row-column ml20">
                  <div class="font16">本次扫描合规项</div>
                  <div style="margin-top: 5px" class="font14 color666">
                    <span class="font24 color333">{{ yibiao.saomiao_count }}</span>
                    项
                  </div>
                </div>
              </div>
              <div class="flex-1 flex flex-align-center">
                <div><img src="@/assets/image/cf/img22.png" alt="" /></div>
                <div class="flex-1 flex box-row-column ml20">
                  <div class="font16">本次扫描人次</div>
                  <div style="margin-top: 5px" class="font14 color666">
                    <span class="font24 color333">{{ yibiao.user_count }}</span>
                    人次
                  </div>
                </div>
              </div>
              <div class="flex-1 flex flex-align-center">
                <div><img src="@/assets/image/cf/img23.png" alt="" /></div>
                <div class="flex-1 flex box-row-column ml20">
                  <div class="font16">发现风险点</div>
                  <div style="margin-top: 5px" class="font14 color666">
                    <span class="font24 color333">{{ yibiao.fxd }}</span>
                    个
                  </div>
                </div>
              </div>
              <div class="flex-1 flex flex-align-center">
                <div><img src="@/assets/image/cf/img24.png" alt="" /></div>
                <div class="flex-1 flex box-row-column ml20">
                  <div class="font16">发现风险员工</div>
                  <div style="margin-top: 5px" class="font14 color666">
                    <span class="font24 color333">{{ yibiao.fxUserCount }}</span>
                    人
                  </div>
                </div>
              </div>

              <div class="flex-1 flex flex-align-center">
                <el-button type="primary" @click="riskvisible = true" style="height: 36px;font-size: 17px;">
                  <img src="@/assets/image/cf/img25.png" alt="按钮图标" class="button-icon" />
                  极速扫描
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- router.push({ path: '/aa' }); -->
      <div class="flex mt20 flex-pack-justify">
        <div class="wrap flex-1">
          <div class="zi1">
            企业合规趋势图
            <span class="font15 color666">(展示近7次合规值趋势)</span>
          </div>
          <div ref="chartRefzx" class="echartsClass"></div>
        </div>
        <div class="wrap flex-1 ml20">
          <div class="zi1">入在离风险预警</div>
          <div ref="chartRefrzl" class="echartsClass"></div>
        </div>
        <div class="wrap flex-1 ml20">
          <div class="zi1">专项风险预警</div>
          <div ref="chartRefzxfx" class="echartsClass"></div>
        </div>
      </div>
    </div>

    <div class="flex mt20 table_qu box-row-column flex-1">
      <div class="flex width100 borderbottomea paddingbottom20">
        <div class="zi1 flex-1">风险明细</div>
      </div>

      <el-form ref="queryForm" :inline="true" class="mt20" :model="queryParams">
        <el-form-item label="风险审查阶段:">
          <el-select v-model="queryParams.class" placeholder="风险审查阶段" style="width: 200px">
            <el-option v-for="item in fxjdoptions" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="风险审查点:">
          <el-select v-model="queryParams.type" placeholder="风险审查点" style="width: 200px">
            <el-option v-for="item in fxscoptions" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="关联员工:">
          <el-input v-model="queryParams.uid" placeholder="请输入关联员工" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="处理状态:">
          <el-select v-model="queryParams.status" placeholder="处理状态" style="width: 200px">
            <el-option v-for="item in statusloptions" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" style="width: 72px;height: 35px;font-size: 16px;" size="mini">搜索</el-button>
          <el-button @click="reset" style="width: 72px;height: 36px;font-size: 16px;">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)"  header-row-class-name="table-header">
        <el-table-column label="序号" width="80" align="center">
          <template #default="{ $index }">
            {{ $index + (pageInfo.page - 1) * pageInfo.limit + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="风险审查阶段" align="center" prop="risk_type" width="150" />
        <el-table-column label="风险审查点" align="center" prop="risk_name" width="150" />
        <el-table-column label="风险描述" align="center" prop="risk_desc" width="250" />
  

        <el-table-column label="处理状态" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 0" type="danger">待处理</el-tag>
            <el-tag v-if="scope.row.status == 1" type="success">已处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="关联员工" align="center" prop="name" />
        <el-table-column label="扫描时间" align="center" prop="create_time" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button class="selfColor" text icon="view" @click="godangan(scope.row, 1)" v-if="scope.row.status == 1">查看</el-button>
            <el-button class="selfColor" text icon="Edit" @click="godangan(scope.row, 0)" v-if="scope.row.status == 0">处理</el-button>
            <el-button class="selfColor" text icon="RefreshLeft" @click="checkrisk(scope.row)">重新审查</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total" :current-page="pageInfo.page" :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" />
    </div>

    <riskDialog v-model:visible="riskvisible" @getnewdata="getnewdata" :companyid="companyid" />
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, onBeforeUnmount, reactive, nextTick, watch, computed } from "@/TUIKit/adapter-vue";

  import riskDialog from "./components/riskDialog.vue";

  import { useCompanyDataStore } from "@/store/companys";
  import * as echarts from "echarts";

  import { useRouter } from "vue-router";
  import { risk_listapi, risk_rescan, risk_detail, risk_score } from "@/api/cf";
  import Pagination from "@/components/Pagination.vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  const companyDataStore = useCompanyDataStore();

  const router = useRouter();
  const yibiao = ref({
    fxUserCount: null,
    fxd: null,
    saomiao_count: null,
    user_count: null,
  });

  const chartRefzx = ref(null);
  const chartRefrzl = ref(null);
  const chartRefzxfx = ref(null);

  const riskvisible = ref(false);
  const activeName = ref(null);
  const queryParams = ref({ class: "", type: "", uid: "", status: "" });
  const pageInfo = ref({ page: 1, limit: 10 });
  const fxjdoptions = ref([]);
  const fxscoptions = ref([]);
  const statusloptions = ref([]);
  const loading = ref(false);

  const list = ref([]);

  // 获取 DOM 元素的引用（用于初始化图表）
  const chartRef = ref(null);
  // 存储 ECharts 实例
  let chartInstance = null;
  let chartInstance1 = null;
  let chartInstance2 = null;

  const isedit = ref(false);
  const deptoptions = ref([]);
  // const currentComanyInfo = computed(() => companyDataStore.currentComanyInfo)
  function chananniu() {
    istaban.value = null;
  }
  const total = ref(100);

  const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.value.page = page;
    pageInfo.value.limit = size;
    list.value = [];
    getuser_list();
  };

  const selectedArrRef = ref(null);
  const props1 = reactive({
    checkStrictly: true,
    emitPath: false,
    multiple: false,
    value: "id",
    label: "name",
    children: "children",
  });

  function checkrisk(row) {
    const loading = ElLoading.service({
      lock: true,
      text: "合规检测中,请稍后……",
      background: "rgba(0, 0, 0, 0.3)",
    });

    risk_rescan(row.id)
      .then(res => {
        loading.close();
        if (res.code == 1) {
        getuser_list()

          ElMessage({
            message: res.msg,
            grouping: true,
            type: "success",
          });
        }
      })
      .catch(err => {
        loading.close();
      });
  }

  // 档案
  function godangan(row, status) {
    router.push({ name: "employeeInfo", params: { id: row.info_id, name: row.type, status: status } });
  }

  //部门选择
  function handleChange(value) {
    selectedArrRef.value.togglePopperVisible();
    // console.log(value); // 输出当前选择的值，可以是任意一级的ID数组
  }

  function getnewdata() {
    const aa = {
      fxUserCount: null,
      fxd: null,
      saomiao_count: null,
      user_count: null,
    };
    yibiao.value = aa;
    fxjdoptions.value = [];
    fxscoptions.value = [];
    statusloptions.value = [];
    window.removeEventListener("resize", resizeChart);
    chartInstance?.dispose(); // 销毁 echarts 实例
    chartInstance2?.dispose(); // 销毁 echarts 实例
    chartInstance1?.dispose();
    chartfen?.dispose();
    window.addEventListener("resize", resizeChart);
    getuser_list();
    getrisk_score();
    risk_listapi(companyid.value).then(res => {
      fxjdoptions.value = res.data.list1;
      fxscoptions.value = res.data.list2;
      statusloptions.value = res.data.list3;
    });
  }
  const time = ref(null);
  const currentComanyInfo = computed(() => companyDataStore.currentComanyInfo);
  const currentComanyid = companyDataStore.currentComanyInfoid;

  // const companyid = computed(() => {
  //   if (companyDataStore.defaultCompany) {
  //     return companyDataStore.defaultCompany.id;
  //   } else {
  //     return "";
  //   }
  // });

  const companyid = ref(null);

  // 组件挂载后执行初始化
  onMounted(() => {
    // console.log(localStorage.getItem('company_id'),"sggg2222222tsgsgsgwywtwtwwhwywysgbhwyw3y")
    companyid.value = localStorage.getItem("company_id");
    // 监听窗口大小变化事件以支持响应式
    window.addEventListener("resize", resizeChart);

    nextTick(() => {
      getuser_list();
      getrisk_score();
      risk_listapi(companyid.value).then(res => {
        fxjdoptions.value = res.data.list1;
        fxscoptions.value = res.data.list2;
        statusloptions.value = res.data.list3;

      });
    });
  });

  function getuser_list() {
    risk_detail({ company_id: companyid.value, page: pageInfo.value.page, limit: pageInfo.value.limit, ...queryParams.value }).then(res => {
      list.value = res.data.list;
      total.value = res.data.count;
    });
  }
  function getrisk_score() {
    risk_score(companyid.value).then(res => {
      yibiao.value = res.data.yibiao;
        time.value = res.data.time;
      setTimeout(() => {
        initChartzx(res.data.list);
        initChartrzl(res.data.riskSummary);
        initChartzxfx(res.data.special_risk);
        initChartfen(res.data.risk_score);
      }, 500);
      //chartsdata.value = res.data;
      //  initChart();
    });
  }

  function reset() {
    queryParams.value.class = "";
    queryParams.value.type = "";
    queryParams.value.uid = "";
    queryParams.value.status = "";

    pageInfo.value.page = 1;
    pageInfo.value.limit = 10;
    list.value = [];
    getuser_list();
  }

  function handleQuery() {
    pageInfo.value.page = 1;
    pageInfo.value.limit = 10;
    list.value = [];
    getuser_list();
  }

  const gaugeChartRef = ref<HTMLElement | null>(null);
  let chartfen: echarts.ECharts | null = null;

  const initChartfen = (score: any) => {
    if (!gaugeChartRef.value) return;

    chartfen = echarts.init(gaugeChartRef.value);
    const option = {
      series: [
        {
          name: "", //系列名称,用于tooltip的显示
          type: "gauge", //仪表盘
          max: 100, //最大的数据值
          center: ["50%", "70%"], // 调整垂直位置为 70%（原为 60%）
          radius: "99%", //仪表盘半径,可以是百分比,也可以是绝对的数值
          splitNumber: 5, //仪表盘刻度的分割段数
          animationDuration:1000, //初始动画的时长
          startAngle: 180, // 起始角度（左）
          endAngle: 0, // 结束角度（右）
          axisLine: {
            //仪表盘轴线
            lineStyle: {
              //轴线不同的颜色段
              color: [
                [0.6, "#FC5950"],
                [0.8, "#4fa7FF"],
                [1, "#37E282"],
              ],
              width: 10, //轴线宽度
            },
          },
          pointer: {
            itemStyle: {
              color: score <= 60 ? "#FC5950" : score <= 80 ? "#4fa7FF" : "#37E282", // 指针颜色
            },
            length: "60%", // 指针长度
            width: 5, // 指针宽度
          },
          splitLine: {
            //分割线
            length: 20, //分割线线长
            lineStyle: {
              color: "auto", //分割线颜色
            },
          },
          axisTick: {
            //刻度样式
            length: 10, //刻度线长
            lineStyle: {
              color: "auto",
            },
          },
          detail: {
            //仪表盘详情
            formatter: "{value}",
            color: score <= 60 ? "#FC5950" : score <= 80 ? "#4fa7FF" : "#37E282",
            fontSize: 25,
            fontWeight: "bold",
            fontFamily: "FZLTHJW--GB1-0",
            //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移
            offsetCenter: [0, "35%"],
          },
          data: [{ value: score }],
        },
      ],
    };
   // console.log(option);
    chartfen.setOption(option);
  };


  // 专项风险
  const initChartzxfx = (list: any) => {
    if (!chartRefzxfx.value) return;
    if (chartRefzxfx.value) {
      // 初始化 echarts 实例
      chartInstance2 = echarts.init(chartRefzxfx.value);
      // 配置项
      const option = {
        series: [
          {
            type: "pie",
            radius: "60%",
            right: "36%",
            data: list,
            label: {
              textStyle: {
                fontSize: 12,
                // color: "#999999",
              },
              formatter: (params: any) => {
                if (Number(params.value) === 0) {
                  return "";
                } else {
                  return `${params.percent.toFixed(2)}%`;
                }
              },
              // position: "inside", // 标签显示在饼图外部
              // // 关键配置：隐藏标签连线
              // labelLine: {
              //   show: false, // 设置为 false 隐藏连线
              // },
            },
          },
        ],
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(255,255,255,0.9)",
          textStyle: { color: "#333" },
          borderColor: "#eee",
          borderWidth: 1,
          padding: 10,
          // 自定义tooltip格式
          formatter: params => {
            return `
                          <div style="font-weight:bold">${params.name}</div>
                          <div>占比: ${parseFloat(params.value).toFixed(2)}%</div>
                            <div>风险数: ${params.data.count}项</div>
                           `;
          },
        },
        legend: {
          orient: "vertical",
          type: "scroll",

          align: "left",
          left: "right",
          icon: "circle", // 设置为圆形标记
          itemWidth: 8, // 标记宽度
          itemHeight: 8, // 标记高度
          textStyle: {
            color: "#333",
            lineHeight: 13, // 设置行高，解决文字被遮挡的问题
          },

          pageTextStyle: {
            color: "#fff",
          },
          pageIcons: {
            vertical: [
              "image://",
              "image://",
            ],
          },
        },
      };

      // 使用配置项渲染图表

      chartInstance2.setOption(option);
    }
  };

  // 入在离
  const initChartrzl = (list: any) => {
    if (chartRefrzl.value) {
      // 初始化 echarts 实例
      chartInstance1 = echarts.init(chartRefrzl.value);

      // 配置项
      const option = {
        series: [
          {
            type: "pie",
            radius: ["45%", "70%"], // 内半径40%，外半径70%
            right: "25%",
            data: list,
            label: {
              formatter: (params: any) => {
                if (Number(params.value) === 0) {
                  return "";
                } else {
                  return `${params.percent.toFixed(2)}%`;
                }
              },
              textStyle: {
                fontSize: 12,
                color: "#999999",
              },
            },
          },
        ],
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(255,255,255,0.9)",
          textStyle: { color: "#333" },
          borderColor: "#eee",
          borderWidth: 1,
          padding: 10,
          // 自定义tooltip格式
          formatter: params => {
             const data = params.data;
            return `
                          <div style="font-weight:bold">${data.name}</div>
                          <div>占比: ${parseFloat(data.value).toFixed(2)}%</div>
                          <div>风险数: ${data.count}项</div>

                           `;
          },
        },
        legend: {
          orient: "vertical",
          type: "scroll",
          right: "10%", // 整体靠右对齐
          align: "left",
          icon: "circle", // 设置为圆形标记
          itemWidth: 8, // 标记宽度
          itemHeight: 8, // 标记高度
          textStyle: {
            color: "#333",
            lineHeight: 13, // 设置行高，解决文字被遮挡的问题
          },
          pageTextStyle: {
            color: "#fff",
          },
        },
      };

      // 使用配置项渲染图表
      chartInstance1.setOption(option);
    }
  };

  // 折线
const initChartzx = (list: any) => {
  if (!list || list.length === 0) {
    console.error('数据为空');
    return;
  }

  // 确保 risk_score 是数字类型
  const formattedList = list.map((item: any) => ({
    ...item,
    risk_score: Number(item.risk_score) || 0,
  }));

  if (chartRefzx.value) {
    const chartInstance = echarts.init(chartRefzx.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: function(params: any) {
          if (!params || !params[0]) return '无数据';
          const index = params[0].dataIndex;
          const data = formattedList[index]; // 直接从 formattedList 获取原始数据
          return `
            <div style="font-weight: bold; margin-bottom: 5px;">
              扫描时间: ${data.create_time || '无时间'}
            </div>
            <div style="margin: 5px 0;">
              <span>合规值: ${data.risk_score || 0}分</span><br>
              <span style=" ">风险点: ${data.fxd || '无'}</span><br>
              <span style="">合规项: ${data.hgx || '无'}</span>
            </div>
          `;
        },
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        borderColor: '#eee',
        borderWidth: 1,
        padding: 10,
      },
      xAxis: {
        type: 'category',
        data: formattedList.map((_, index) => `${index + 1}`), // X轴显示扫描次数
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        name: '单位：分',
        min: 0,
        max: 100,
        interval: 25,
      },
      series: [{
        name: '合规值',
        type: 'line',
        data: formattedList.map(item => item.risk_score), // 折线数据（纯数字）
        itemStyle: { color: '#1890ff' },
        smooth: true,
      }],
    };

    chartInstance.setOption(option);

    // 窗口大小变化时重新渲染图表
    window.addEventListener('resize', () => chartInstance.resize());
  }
};

  const checklist = ref([]);

  // 窗口大小变化时调整图表尺寸
  const resizeChart = () => {
    chartInstance?.resize();
    chartInstance1?.resize();
    chartInstance2?.resize();
    chartfen?.resize();
  };

  // 组件卸载前清理资源，防止内存泄漏
  onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeChart);
    chartInstance?.dispose(); // 销毁 echarts 实例
    chartInstance2?.dispose(); // 销毁 echarts 实例
    chartInstance1?.dispose();
    chartfen?.dispose();
  });
</script>

<style lang="scss" scoped>
.button-icon {
  margin-right: 5px;
}

.echartsClass {
  padding: 15px 0px 15px 0px;
  box-sizing: border-box;
  width: 100%;
  height: 320px;
}

.gauge-chart {
  width: 200px;
  height: 200px;
}

::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

.el-icon {
  line-height: var(--fontSize);

  .el-icon-my-dc {
    background: url("../../assets/image/cf/img25.png") no-repeat;
    width: 18px;
    height: 13px;
  }
}

::v-deep .my-icon {
  background: url("../../assets/image/cf/img25.png") no-repeat;
  background-size: cover;
}

/* 下划线颜色 */
// ::v-deep .el-tabs__active-bar {
//   background-color: #01509f;
// }

::v-deep .el-tabs__item {
  font-size: 17px;
  color: #666;
}

.fxzi1 {
  color: #01509f;
  background-color: #f3f8fb;
  font-size: 12px;
  border-radius: 5px;
  padding: 5px;
}

::v-deep .el-tabs__item.is-active {
  color: #01509f;
}

::v-deep .el-form-item__label {
  font-size: 16px !important;
}

::v-deep .el-cascader-node__label {
  font-size: 16px !important;
}

::v-deep .el-tabs__active-bar {
  background-color: transparent !important;
  background-image: linear-gradient(90deg, transparent 0, transparent 10%, #01509f 0, #01509f 85%, transparent 0, transparent);
}

.wrap {
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;

  .title {
    font-size: 18px;
    margin-bottom: 20px;
    height: 24px;
    display: flex;
    justify-content: space-between;

    span {
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }
  }
}

.tabqu {
  flex-wrap: wrap;

  // &::-webkit-scrollbar {
  //   display: none;
  // }
}

.tabkuai {
  padding: 6px 0px;
  background-color: #f7f7f7;
  border-radius: 6px;
  color: #666;
}

.tab_check {
  font-size: 15px;
  line-height: 32px;
  padding: 0px 10px;

  margin: 0px 10px;
  border-radius: 6px;
}

.tab_check.on {
  background-color: #e6f5fd;
  color: #01509f;
}

.threekuai {
  margin: 0px 20px;
  font-size: 14px;
  padding-bottom: 8px;
  color: #666;
}

.threekuai.on {
  color: #01509f;
  border-bottom: solid 2px #01509f;
}

.jiantouimg {
  width: 15px;
  height: 6px;
  background: url(../../assets/image/cf/img12.png) no-repeat center center;
  background-size: 100% 100%;
  margin: 0px auto;
}

.logoimg1 {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: 6px;
}

.logoimg2 {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  margin-right: 6px;
}

.logoimg3 {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: 6px;
}

.selfColor {
  color: #01509f !important;
  padding: 5px 0px;
  font-size: 15px;
}

.list {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

.header_left {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.header_right {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.zi1 {
  font-size: 20px;
  color: #333;
  // font-family: 黑体;
  font-weight: bold
}

.zi3 {
  font-size: 16px;
}

.custom-tabs {
  width: 100%;
  /* 或者具体的宽度值 */
  overflow-x: auto;
  white-space: nowrap;
  /* 防止标签内容换行 */
}

.right_qu {
  background-color: #f3f8fb;
  padding: 0px 10px;
  // border-radius: 6px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  width: 80%;
  height: 100%;
  overflow-y: scroll;
}

.right_qu.on {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.tab_one {
  width: 100%;
  text-align: center;

  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;

  display: flex;

  // margin: 0 10px;
  cursor: pointer;
  font-size: 17px;
}

.tab_one.on {
  background-color: #f3f8fb;
  color: #01509f;
}

.tab_one1 {
  height: 50px;
  background-color: #e6e2ff;
  // background: linear-gradient(to right, #8985ff 100%, #c3c0ff 20%);
  border-radius: 4px;
  text-align: center;
  width: 100%;
  line-height: 50px;
  margin: 0 15px;
  cursor: pointer;
  font-size: 16px;
  color: #726cfc;
}

.tab_one1.on {
  border: solid 1px #b1a9ff;
  line-height: 48px;
  height: 48px;
}

.tab_one2.on {
  line-height: 48px;
  height: 48px;
  border: solid 1px #79d1ff;
}

.tab_one3.on {
  line-height: 48px;
  height: 48px;
  border: solid 1px #ffb1a2;
}

.tab_one2 {
  height: 50px;
  background-color: #d4eeff;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  line-height: 50px;
  margin: 0 15px;
  cursor: pointer;
  font-size: 16px;
  color: #009ffa;
}

.tab_one3 {
  height: 50px;
  background-color: #ffeae3;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  line-height: 50px;
  margin: 0 15px;
  cursor: pointer;
  font-size: 16px;
  color: #f9856f;
}

.tab_kuai {
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  font-size: 16px;
  margin-right: 20px;
  cursor: pointer;

  border: solid 1px #0052a3;
  border-radius: 5px;
  color: #0052a3;
}

// #f3f8fb;
.tab_kuai.on {
  background-color: #01509f;
  color: #fff;
  border-radius: 4px;
}

.zi_num {
  font-size: 28px;
  font-weight: bold;
  margin-top: 5px;
}

.y1::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #1763f0;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.y2::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #fe5c54;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.y3::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #2ad4ad;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.y4::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #fe7b42;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.y5::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #9188e4;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.num_kuai {
  width: 30%;
  margin-top: 10px;
  // margin-right: 10px;
  text-align: left;
  position: relative;
}

.table_qu {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.table_anniu {
  height: 34px;
  border: solid 1px #e2e2e2;
  border-radius: 6px;

  font-size: 16px;
  line-height: 34px;
  text-align: center;
  padding: 0 12px;
  cursor: pointer;
  margin: 0 10px;
}

.table_anniu.on {
  border-color: #01509f;
  background-color: #01509f;
  color: #fff;
}

.rounded-table {
  border-radius: 10px;
  /* 调整这个值来改变圆角的大小 */
  overflow: hidden;
  /* 确保圆角不会被溢出的内容破坏 */
}

.el-table th .el-table__cell {
  background-color: #69c0f3 !important;
  /* 自定义颜色 */
  color: #333;
  /* 自定义文字颜色 */
}

:deep(.el-table__header) {
  .table-header {
    th {
      font-size: 16px;
      background: #f3f8fb;
      height: 53px;
      color: #6f7070;
      font-weight: normal;
    }
  }
}
</style>
